<template>
  <view>
    <view class="content">
      <!-- 获取收获地址 -->
      <view class="address" v-if="address.userName">
        <view class="ress">
          <text>{{ detail }}</text></view
        >
        <view class="number">
          <text>{{ address.userName }}</text
          ><text>{{ address.telNumber }}</text>
        </view>
      </view>
      <view class="get_address" v-else>
        <button class="btn" @click="chooseAddress">获取收货地址</button>
      </view>
    </view>
     <div  v-for="item in carts" :key="item.goods_id"> <div class="nave">
        <div class="num">商品数量{{shopNum}}</div>
        <div class="romve" @click="romveShopp(item.goods_id)">删除</div>
      </div>
    <view class="goods_item">
      <!-- 复选框 -->
      <view class="check">
        <checkbox-group @change="changeValue">
          <checkbox :checked="item.checked"></checkbox>
        </checkbox-group>
      </view>
      <!-- 图片 -->
      <image
        class="goods_item_image"
        :src="
          item.goods_small_logo ||
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1197362953,3835376075&fm=26&gp=0.jpg'
        "
        mode="aspectFill"
      />
      <!-- 商品信息 -->
      <view class="goods_item_info">
        <!-- 标题 -->
        <view class="goods_item_name">
          {{ item.goods_name }}
        </view>
        
        <!-- 价格 -->
        <view class="goods_item_price">
          <view class="price">￥{{ item.goods_price }}</view>
          <view class="number">
            <view class="jian" @click="handeclickMinus">-</view>
            <view class="num">{{ item.count }}</view>
            <view class="jia" @click="handeclickAdd(item.goods_id)">+</view>
          </view>
        </view>
      </view>
    </view></div>
    
    <!-- 底部结算栏 -->
    <view class="cart_tool">
      <!-- 全选 -->
      <view class="all">
        <checkbox-group>
          <checkbox :checked="allChecked">全选</checkbox>
        </checkbox-group>
      </view>

      <view class="total_price">合计:￥{{allPrice}}</view>
      <view class="all_order">结算({{shopNum}})</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: "", // 地址
      carts: [], // 购物车信息
    };
  },
  onLoad() {
    this.carts = wx.getStorageSync("carts") || [];
  },
  methods: {
    // 点击获取收货地址
    chooseAddress() {
      wx.chooseAddress({
        success: (result) => {
          console.log(result);
          this.address = result;
        },
        fail: () => {},
        complete: () => {},
      });
    },
    // 复选框选中事件
    changeValue(e) {
      console.log(e.detail.value);
    },
    // 购物数量加
    handeclickAdd(id){
    this.carts.map(item=>{
      return item.count++
    })
    },
    //  购物车数量减
    handeclickMinus(){
        this.carts.map(item=>{
      return item.count--
    })
    },
    // 删除商品
    romveShopp(id){
      this.carts.forEach((item,index)=>{
     console.log(item.goods_id);
     if(id===item.goods_id){
      this.carts.splice(index,1)
     }
      })

    }
  },
  computed: {
    // 地址拼接
    detail() {
      return (
        this.address.provinceName +
        this.address.cityName +
        this.address.countyName +
        this.address.detailInfo
      );
    },
    // allChecked   全选
    allChecked() {
      return this.carts.every((item) => item.checked);
    },
    //  商品数量
     shopNum(){
    return  this.carts.length
     },

    // 总价格
    allPrice() {
      let  total = 0
       this.carts.forEach((item,index)=>{
        total+= item.goods_price*item.count
      });
      return total
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 50rpx;
  .address {
    .ress {
      font-size: 30rpx;
    }
    .number {
      padding-top: 30rpx;
      font-size: 24rpx;
      color: #999;
      text:last-child {
        padding-left: 20px;
      }
    }
  }
}
.car_title {
  padding: 10rpx 50rpx;
  color: #000;
  font-size: 26rpx;
}
.get_address {
  padding-top: 50rpx;
  .btn {
    width: 300rpx;
    height: 90rpx;
    border: 1px solid $theme-color;
    border-radius: 45rpx;
    color: #666;
  }
}
.goods_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18rpx;
  .check {
    checkbox {
      margin: 0 30rpx;
    }
  }
  .goods_item_image {
    width: 180rpx;
    height: 160rpx;
    margin-right: 30rpx;
  }

  .goods_item_info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    .goods_item_name {
      font-size: 28rpx;
      color: #666;
      margin: 0 5px 20px 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .goods_item_price {
      display: flex;
      justify-content: space-between;
      padding-right: 25rpx;
      .price {
        color: $theme-color;
      }
      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        .jian,
        .jia {
          border: 1px solid #cccccc;
          border-radius: 50%;
          width: 38rpx;
          height: 38rpx;
          line-height: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .num {
          margin: 0 25rpx;
        }
      }
    }
  }
}.nave {
  display: flex;
  justify-content: space-between;
  padding: 5rpx 50rpx;
  font-size: 32rpx;
  .num {

  }
  .romve {
    border: 1rpx solid #cccc;
    padding: 5rpx  35rpx;
    border-radius: 20rpx;
  }
}

 .cart_tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ececec;
  padding: 0 50rpx;
  height: 83rpx;
  width: 100vw;
  position: fixed;
  bottom: 0;
  .all {
    font-size: 24rpx;
  }

  .total_price {
    margin-left: 40rpx;
    flex: 1;
    color: #ea4350;
  }
  .all_order {
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    font-size: 26rpx;
    color: #fff;
    text-align: center;
    background-color: #ea4350;
    border-radius: 26rpx;
  }
}
</style>
